<template>
  <el-table
    :data="volunteerList"
    height="335"
    style="width: 100%"
    :header-cell-style="{ 'border-bottom': 'none' }"
    :header-row-style="{ height: '60px' }"
    :cell-style="{ height: '60px', 'border-bottom': 'none' }"
    stripe
  >
    <el-table-column prop="index" label="志愿表" align="center">
      <template #default="spoce">
        <div :class="spoce.row.passed == 1 ? 'isPassed' : ''">
          {{ spoce.row.index }}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="title" label="名称" width="150" align="center">
      <template #default="spoce">
        <div :class="spoce.row.passed == 1 ? 'isPassed' : ''">
          {{ spoce.row.title }}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="sgname" label="科目" align="center">
      <template #default="spoce">
        <div :class="spoce.row.passed == 1 ? 'isPassed' : ''">
          {{ spoce.row.sgname }}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="section" label="位次" align="center">
      <template #default="spoce">
        <div :class="spoce.row.passed == 1 ? 'isPassed' : ''">
          {{ spoce.row.section }}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="score" label="分数" align="center">
      <template #default="spoce">
        <div :class="spoce.row.passed == 1 ? 'isPassed' : ''">
          {{ spoce.row.score }}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="type" label="成绩类型" align="center">
      <template #default="spoce">
        <div :class="spoce.row.passed == 1 ? 'isPassed' : ''">
          {{ spoce.row.isGKB == '0' ? '普通版' : '高考版' }}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="scheme" label="类型" align="center">
      <template #default="spoce">
        <div :class="spoce.row.passed == 1 ? 'isPassed' : ''">
          {{ spoce.row.scheme }}
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="lastModificationTime"
      label="最后编辑时间"
      width="200"
    >
      <template #default="spoce">
        <div :class="spoce.row.passed == 1 ? 'isPassed' : ''">
          {{ spoce.row.lastModificationTime }}
        </div>
      </template>
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      :width="isShowOptionItem ? 250 : 60"
    >
      <template #default="spoce">
        <div v-if="spoce.row.status == 0 && spoce.row.passed == 0">
          <el-button
            link
            type="primary"
            size="small"
            @click="onClickOptionItem(spoce.$index, 0)"
            >查看</el-button
          >
        </div>
        <div v-else>
          <el-button
            link
            type="primary"
            size="small"
            v-if="spoce.row.passed == 0"
            @click="onClickOptionItem(spoce.$index, 0)"
            >查看</el-button
          >
          <el-button
            v-if="isShowOptionItem && spoce.row.passed == 0"
            link
            type="primary"
            size="small"
            @click="onClickOptionItem(spoce.$index, 4)"
            >复制到专家</el-button
          >
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
const emit = defineEmits(['onClickOptionItem']);

const { volunteerList, isShowOptionItem } = defineProps({
  volunteerList: {
    type: Array,
    default: [],
  },
  isShowOptionItem: {
    type: Boolean,
    default: true,
  },
});

/**
 * 点击志愿表操作选项
 * @param {Number} index 下标
 * @param {Number} type 操作类型 0-查看 4-复制到专家
 */
function onClickOptionItem(index, type) {
  emit('onClickOptionItem', index, type);
}
</script>
<style lang="scss" scoped>
.isPassed {
  color: #cdcdcd !important;
}
</style>
